// 正在运行
import React from "react";
import { connect } from "react-redux";
import { endPushEndAction, deleItemendAction } from "../store/actionCreators";
const End = props => {
  // 从已经完成中添加到正在完成
  const handleChange = ({ target }) => {
    props.pushadd(parseInt(target.name));
  };
  const handleChlik = id => {
    props.pushDele(id)
  };
  return (
    <div className="plan-wrap">
      {/* 标题 */}
      <h2 className="plan-title">
        <p>已完成</p> <span>{props.end.length}</span>
      </h2>
      {/* 列表 */}
      <ul>
        {props.end.map(item => {
          return (
            <li key={item.id}>
              <label>
                <input
                  type="checkbox"
                  name={item.id}
                  onChange={handleChange}
                  checked={item.checked}
                />
                <span>{item.text}</span>
              </label>
              <a
                href="###"
                style={{ color: "red" }}
                onClick={() => {
                  handleChlik(item.id);
                }}
              >
                删
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
};
const mapStateToProps = state => state;
const mapDispatchToProps = dispatch => {
  return {
    pushadd(id) {
      dispatch(endPushEndAction(id));
    },
    // 从已经完成中删除一条
    pushDele(id) {
      dispatch(deleItemendAction(id));
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(End);
